<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons *ngIf="iconShow" class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>{{ projectName }}</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>
<ion-content>
    <div class="top">
        <!-- 左边部分数据 -->
        <div class="left">
            <div class="square">
                <div class="dataTitle text">
                    <label class="title">温湿度</label>
                    <span class="unit">
                        <label>℃</label>
                    </span>
                    <span class="unit">
                        <label>/</label>
                        <label>%RH</label>
                    </span>
                </div>
                <div class="dataFlex">
                    <div>
                        <span [ngClass]='{"yellowColor": (temperature >= 18 && temperature <= 26) ? false : true}'>
                            {{temperature||'-'}}
                        </span>
                    </div>
                    <div>
                        <span class="separator">/</span>
                        <span [ngClass]='{"yellowColor": (humidity >= 40 && humidity <= 70) ? false : true}'>
                            {{humidity||'-'}}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间部分数据 -->
        <div class="mid">
            <section>
                <div class="Text-init">
                    <div class="fire-alarm-info" *ngFor="let alarmInfo of alarmList" [ngStyle]="{'color': alarmInfo.alarmLevel === 3? '#FF1919' : '#FF8B02'}">
                        <span>{{ alarmInfo.deviceValueLastTime | date: 'yyyy-MM-dd HH:mm' }}</span>
                        <p>{{ alarmInfo.deviceName + alarmInfo.alarmTypeName + ',告警值:' + alarmInfo.alarmValue }}
                        </p>
                    </div>
                </div>
            </section>
            <!-- <pic-list class="pic-status" [roomState]='roomState'></pic-list> -->
        </div>

        <!-- 右边部分数据 -->
        <div class="right">
            <div class="square">
                <div class="dataTitle text">
                    <label class="title">故障</label>
                    <!-- <span class="unit" *ngFor='let detail of left.deviceParameters; first as isFirs'>
                        <label>{{ detail.unit }}</label>
                    </span> -->
                </div>
                <div class="dataFlex">
                    <div>
                        <span [ngClass]='{"redColor":this.faultList.length>0}'>
                            {{ this.faultList.length}}
                        </span>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="Rooms">
        <div class="rooms">
            <div class="room-square" *ngFor="let room of roomGroup | listLength: 0:3; let i = index" (click)="room? toPage(room,i): ''">
                <ion-badge *ngIf="room && room.areaSerAlarmCount" class="seriousBadge">{{ room.areaSerAlarmCount }}</ion-badge>
                <ion-badge *ngIf="room && room.areaGenAlarmCount" class="normalBadge">{{ room.areaGenAlarmCount }}</ion-badge>
                <img *ngIf="room" src="assets/imgs/system/function/{{system.deviceSysId}}.svg" imgState="assets/imgs/system/less/default.png" />
                <p *ngIf="room">{{ room.areaName }}</p>
                <pic-list *ngIf="room" class="index-pics"></pic-list>
            </div>
        </div>
    </div>
</ion-content>